import React, {Children, ElementType} from 'react';
import { ISortable } from '@bastet/widgets'
import type {IComponentType} from "@bastet/widgets";
export { default as settings } from './setting'


const ViewComponent = ({ children, ...props }: ISortable) => {
  const [ Child1, Child2 ] = children as React.ElementType[] || []
  console.log('Test: => ', { children, ...props })

  return (
    <div
        style={{ display: 'flex', flexDirection: 'column', height: '100%'}}
        className="draggable" onClick={(event) => {
        event.stopPropagation()
        console.log('click')
    }}>
      <div style={{ display: 'flex', width: '100%', height: '40px' }}>
        <div style={{ flex: 1}}> name: </div>
        <div style={{ flex: 1}}>
          { Child1 && <Child1/> }
        </div>
      </div>
      <div style={{ display: 'flex', width: '100%', height: '40px' }}>
        <div style={{ flex: 1}}> age: </div>
        <div style={{ flex: 1}}>
          { Child2 && <Child2/> }
        </div>
      </div>
    </div>
  )
};

export default ViewComponent
